<template>
  <van-nav-bar title="我的" />
  <div class="box">
    <div class="toubu">
      <!-- 头像 -->
      <van-image
        round
        width="10rem"
        height="10rem"
        :src="store.myData.img"
      />
      <!-- 昵称+手机号 -->
       <div class="xx">
        <div class="username" style="color: red;">{{ store.myData.username }}</div>
        <div class="userphone">{{ store.myData.phone }}</div>
       </div>
    </div>
    <!-- 菜单栏 -->
     <div class="menu">
        <div class="item">
            <van-cell title="我的订单" is-link to="/myorder"/>
        </div>
        <div class="item">
            <van-cell title="待支付" is-link />
        </div>
        <div class="item">
            <van-cell title="我的地址" is-link />
        </div>
        <div class="item">
            <van-cell title="意见反馈" is-link />
        </div>
        <div class="item">
            <van-cell title="售后服务" is-link />
        </div>
     </div>
  </div>
</template>
<script setup>
import { useCounterStore } from "@/stores/my";
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore();
console.log(store.myData)
</script>

<style lang="scss" scoped>
.box{
    padding: 0 20px;
    .toubu{
        display: flex;
        .xx{
            display: flex;
            flex-direction: column;
            margin-left: 30px;
            line-height: 40px;
        }
    }
}
.menu{
    margin-top: 15px;
    .item{
        .van-cell{
            background: #eee;
        }
    }
    
}
</style>
